<template>
	<view
	class="coupon-card bg-white flex-center"
	@click="jumpUrl(`/pages/user/personal/coupon/deal/deal?userCouponId=${ item.userCouponId }`)"
	>
		<view class="coupon-card-left clear-flex u-text-center" :style="styleObj">
			<view class="flex-center-center">
				<view class="flex-baseline font-bold color-red">
					<view class="u-f-32 u-lh-38">{{ lang_unit.money }}</view>
					<view class="u-f-66 u-lh-38">{{ item.val || 0 }}</view>
				</view>
			</view>

			<view class="u-f-26 u-lh-36" style="color: #696969;">{{ lang_goods.useOver[0] }}{{ item.max || 0 }}{{ lang_goods.useOver[1] }}</view>
			
			<view class="u-p-t-8 u-f-28 u-lh-40 font-medio">
				{{ typeof item.merchantId === 'number' ? lang_goods.goodsType_shopcoupon : lang_goods.goodsType_coupon }}
			</view>
		</view>
		
		<view class="flex-center-between" style="width: 100%;">
			<view class="u-p-t-10" :style="styleObj">
				<view class="u-f-32 u-lh-44 font-medio">{{ item.title || '' }}</view>
				<view class="u-f-20 u-lh-28 color-grew">
					<view>{{ (item.byMerchantId ? item.byMerchantName : item.merchantName) || '' }}</view>
					<view>{{ lang_goods.coupon_buyTime }}: {{ item.createTime  || '' }}</view>
					<view>{{ lang_goods.coupon_endTime }}: {{ item.endTime || '' }}</view>
					<view v-if="item.byMerchantId">{{ lang_goods.coupon_wirteTime }}: {{ item.useTime  || '' }}</view>
				</view>
			</view>
			
			<view>
				<view v-if="!item.useStatus && !disabled" :style="styleObj">
					<x-common-btn
					width="136"
					height="52"
					background="#FD1E43"
					>
						<view class="u-f-24 u-lh-34">{{ lang_goods.toUse }}</view>
					</x-common-btn>
					<view class="flex-center-center" @click.stop>
						<view class="u-m-t-18 u-lh-28 flex-center" @click="(!item.useStatus && !disabled) && refundAction(item)">
							<view class="u-m-r-4 u-f-20 color-red">{{ lang_order.applyRefund }}</view>
							<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view v-else-if="item.useStatus && item.orderStatus !== 5 && item.orderStatus > 0" @click.stop>
					<x-common-btn
					width="136"
					height="52"
					background="#FD1E43"
					@click="commentAction">
						<view class="u-f-24 u-lh-34">{{ lang_common.evaluate }}</view>
					</x-common-btn>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderInfo } from '@/api/user/order.js'
	export default {
		props: {
			item: {
				default: () => ({})
			},
			disabled: {
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		computed: {
			styleObj() {
				return ({
					opacity: (this.item.useStatus || this.disabled) ? '.618' : 1
				})
			}
		},
		methods: {
			// 评价
			commentAction() {
				let { orderNumber } = this.item
				orderInfo({ orderNumber }).then((result) => {
					uni.navigateTo({
						url: `/pages/user/order/comment/comment?orderNumber=${ orderNumber }`,
						success: res => {
							res.eventChannel.emit('order-comment-page', ({ ...result, itemList: result.itemList.map(item => ({ ...item, stockSpecs: item.stockSpecs || '' })) }))
						}
					})
				})
			},
			// 申请退款
			refundAction(item) {
				uni.navigateTo({
					url: `/pages/user/order/saled/refund/refund?goodsType=1&orderNumber=${ item.orderNumber }&refundAction=1`,
					success: res => {
						console.log({ ...this.item, orderType: item.merchantId ? 7 : 5 })
						res.eventChannel.emit('saled-refund', { ...this.item, orderType: item.merchantId ? 7 : 5 })
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon {
		&-card {
			padding: 20rpx;
			
			&-left {
				margin-right: 22rpx;
				width: 198rpx;
				border-right: 2rpx dashed #E3E3E3;
			}
		}
	}
</style>
